<template>
    <div>
        <div class="container">
            <h1>待处理预约</h1>
            <el-divider></el-divider>
            <template>
                <el-table
                    :data="appointment.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    v-loading="loading"
                    style="margin-top: 15px; width: 100%"
                >
                    <el-table-column label="序号" type="index" width="50"> </el-table-column>
                    <el-table-column prop="appointment_address" label="上门地址" width="300"> </el-table-column>
                    <el-table-column prop="appointment_time" label="上门时间" width="180"> </el-table-column>
                    <el-table-column prop="packaging" label="包装" width="200">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.packaging === 1" type="primary">是</el-tag>
                            <el-tag v-if="scope.row.packaging === 0" type="danger">否</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="context" label="备注"> </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="confirm(scope.row)" type="primary" size="small">确认上门</el-button>
                            <el-button @click="detail(scope.row)" type="success" size="small">预约详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 30, 45, 60, 75]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="length"
                    style="margin-left: 35%; margin-top: 20px"
                >
                </el-pagination>
            </template>
          

            <template>
                <el-dialog style="font-color:black;font-weight:600;"  title="预约详情" :visible.sync="editVisible" width="25%">
                    <el-form v-loading="loading" :model="userInfo" label-width="100px" style="font-weight:600;">
                       
                        <el-form-item label="预约人姓名:">
                            <template>
                                <span  style="font-weight:400;">{{ userInfo.user_name }}</span>
                            </template>
                        </el-form-item>
                        <el-form-item label="性别:">
                            <template>
                                <span style="font-weight:400;">{{ userInfo.user_sex }}</span>
                            </template>
                        </el-form-item>
                        <el-form-item label="预约人电话:">
                            <template>
                                <span style="font-weight:400;">{{ userInfo.user_phone }}</span>
                            </template>
                        </el-form-item>
                        <el-form-item label="预约人邮箱:">
                            <template>
                                <span style="font-weight:400;">{{ userInfo.user_email }}</span>
                            </template>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </template>
        </div>

        <div style="margin-top:15px;">
              <el-card>
                <h1>我的上门</h1>
                <el-divider></el-divider>
                <template>
                    <el-table
                        :data="my_appointment.slice((currentPage1 - 1) * pagesize1, currentPage1 * pagesize1)"
                        v-loading="loading"
                        style="margin-top: 15px; width: 100%"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column label="序号" type="index" width="50"> </el-table-column>
                        <el-table-column prop="appointment_address" label="上门地址" width="250"> </el-table-column>
                        <el-table-column prop="appointment_time" label="上门时间" width="180"> </el-table-column>
                        <el-table-column prop="packaging" label="包装" width="200">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.packaging === 1" type="primary">是</el-tag>
                                <el-tag v-if="scope.row.packaging === 0" type="danger">否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="context" label="备注"> </el-table-column>
                        <el-table-column prop="state" label="状态" width="200">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.state === 1" type="success">已完成</el-tag>
                                <el-tag v-if="scope.row.state === 0" type="primary">待上门</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button @click="detail(scope.row)" type="text" size="small">查看详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage1"
                        :page-sizes="[5, 10, 20, 30, 45, 60, 75]"
                        :page-size="pagesize1"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="length1"
                        style="margin-left: 35%; margin-top: 20px"
                    >
                    </el-pagination>
                </template>
            </el-card>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pagesize: 10,
            length: 0,
            currentPage: 1,
            pagesize1: 10,
            length1: 0,
            currentPage1: 1,
            userInfo: {
                user_name: '',
                user_sex: '',
                user_phone: '',
                user_email: ''
            },
            editVisible: false,
            loading: false,
            appointment: [],
            my_appointment: []
        };
    },
    methods: {
        detail(row) {
            const _this = this;
            let param = new URLSearchParams();
            param.append('user_id', row.user_id);
            this.editVisible = true;
            this.$axios({
                method: 'POST',
                url: 'user/findUserById',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.userInfo.user_name = res.data.result.user_name;
                        _this.userInfo.user_sex = res.data.result.user_sex;
                        _this.userInfo.user_phone = res.data.result.user_phone;
                        _this.userInfo.user_email = res.data.result.user_email;
                    } else {
                        _this.$message.err('暂时没有详情！');
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        //确认用户预约
        confirm(row) {
            this.$confirm('是否确认该预约？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(() => {
                    this.loading = true;
                    const _this = this;
                    let param = new URLSearchParams();
                    param.append('staff_id', localStorage.getItem('user_id'));
                    param.append('user_id', row.user_id);
                    param.append('appointment_id', row.appointment_id);
                    this.$axios({
                        method: 'POST',
                        url: 'appointment/update',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.loading = false;
                                _this.$message.success('预约确认成功！');
                                _this.$router.go(0);
                            } else {
                                _this.$message.err('暂时没有新的上门预约');
                                _this.$router.go(0);
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                })
                .catch((action) => {
                    this.$message({
                        type: 'info',
                        message: action === 'cancel' ? '取消操作' : '停留在当前页面'
                    });
                });
        },
        tableRowClassName({ row, rowIndex }) {
            // if (row.state === 0) {
            //     return 'warning-row';
            // } else
            if (row.state === 1) {
                return 'success-row';
            }
            return '';
        },
        queryAllAppointByStaffId() {
            this.loading = true;
            const _this = this;
            let param = new URLSearchParams();
            param.append('staff_id', localStorage.getItem('user_id'));
            this.$axios({
                method: 'POST',
                url: 'appointment/findAppointmentByStaffId',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.loading = false;
                        _this.my_appointment = res.data.result;
                        _this.length1 = _this.my_appointment.length;
                    } else {
                        _this.$message.err('暂时没有新的上门预约');
                        _this.$router.go(0);
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        queryAllAppoint() {
            this.loading = true;
            const _this = this;
            this.$axios({
                method: 'GET',
                url: 'appointment/findAllAppointmentByStaffNull',
                // data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.loading = false;
                        _this.appointment = res.data.result;
                        _this.length = _this.appointment.length;
                    } else {
                        // _this.expressInfo = null;
                        // _this.$message('暂时没有该分类下的快递信息！');
                        _this.$message.err('暂时没有新的上门预约');
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },
    created() {
        this.queryAllAppoint();
        this.queryAllAppointByStaffId();
    }
};
</script>
<style >
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>